/**
 * pro-form-render 首 页
 * @author SPY
 * @url 语雀:https://www.yuque.com/study365
 */

import React, { useState } from 'react';
import moment from 'moment';
import { Button, Space } from 'antd';
import { connect } from 'umi';
import ProCard from '@ant-design/pro-card';
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
import FormItemPanel from './components/FormItemPanel';
import FormContentPanel from './components/FormCotentPanel';
import FormDetailsPanel from './components/FormDetailsPanel';
import DragSideBar from './components/DragSideBar/DragSideBar';
import styles from './index.less';

const ProFormRender = ({ dispatch }) => {
  const [width, setWidth] = useState(400);

  /**
   * 拖动触发的函数
   * @param {*} width 拖动区域的宽
   * @param {*} height 拖动区域的高
   */
  const onChange = (width, height) => {
    setWidth(width);
  };

  // 清 空
  const handleClearAll = () => {
    if (dispatch) {
      dispatch({
        type: 'proForm/save',
        payload: {
          itemList: [],
        },
      });
    }
  };

  // 头部渲染
  const hearder = (
    <span className={styles.header}>
      <div className={styles.title}>Pro-Form-Render 生成器</div>
      <Space>
        {/* <Button onClick={handleShow}>最终展示</Button> */}
        <Button onClick={handleClearAll}>清 空</Button>
      </Space>
    </span>
  );

  return (
    <ProCard
      title={hearder}
      extra={moment().format('YYYY年MM月DD日')}
      split="vertical"
      bordered
      headerBordered
    >
      <ProCard colSpan="270px" size="small">
        <FormItemPanel />
      </ProCard>
      <DragSideBar
        dragPosition="right"
        showSlot={<FormContentPanel />}
        dragSlot={<FormDetailsPanel />}
        handleSlot={
          <div
            className={styles.handle_slot}
            onClick={() => setWidth(width > 0 ? 0 : 400)}
          >
            <div className={styles.handle_icon_solt}>
              {width > 0 ? <RightOutlined /> : <LeftOutlined />}
            </div>
          </div>
        }
        width={width}
        defaultHeight={600}
        onChange={onChange}
      />
    </ProCard>
  );
};

export default connect(({ proForm }) => ({
  ...proForm,
}))(ProFormRender);
